<template>
  <div class="error-container">
    <layout-header :hide-collapse="true" />
    <div class="error-content">
      <i class="el-icon-warning-outline"></i>
      <div class="text">{{ text }}</div>
      <el-button class="btn" type="primary" @click="backHome"
        >回到首页</el-button
      >
    </div>
  </div>
</template>

<script>
import LayoutHeader from "@/layout/LayoutHeader";
export default {
  name: "Error",
  components: { LayoutHeader },
  data() {
    return {
      map: {
        error: "对不起，参数错误",
        403: "对不起，您没有权限访问此页面",
        404: "对不起，您访问的页面不存在",
      },
    };
  },
  computed: {
    text() {
      return this.map[this.$route.name];
    },
  },
  methods: {
    backHome() {
      this.$router.push({
        path: "/",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.error-container {
  height: 100%;
  min-width: 1320px;

  background-color: #f5f7f9;
  .error-content {
    flex: 1;

    padding-top: 68px;
    text-align: center;
    .el-icon-warning-outline {
      margin-bottom: 42px;
      font-size: 72px;
      font-style: normal;
      color: rgba(0, 0, 0, 0.65);
    }
    .text {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 1.6;
      text-align: center;
    }
    .btn {
      margin-top: 32px;
    }
  }
}
</style>
